<template>
  <view style="background: white">
    <view class="uni-title">
      应用列表
    </view>
    <view class="item-box">
      <view class="flex-item " v-for="(item, index) in list" :key="item.name" @click="goTo(item)">
        <image :src="item.src"></image>
        <text>{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      list: [{
        name: "抖音视频解析",
        src: "/static/home/douyin.png",
        path: "/pages/app/douyin/douyin"
      }, {
        name: "圣诞帽",
        src: "/static/home/christmas.png"
      }, {
        name: "生成二维码",
        src: "/static/home/qrcode.png",
        path: "/pages/app/qrcode/qrcode"
      }, {
        name: "五十音图",
        src: "/static/home/japanese.png",
        path: "/pages/app/fifty-tone/fifty-tone"
      }, {
        name: "查拼音",
        src: "/static/home/pinyin.png",
        path: "/pages/app/pinyin/pinyin"
      }, {
        name: "计算器",
        src: "/static/home/computer.png"
      }, {
        name: "程序员黄历",
        src: "/static/home/calendar.png"
      }, {
        name: "摇骰子",
        src: "/static/home/dice.png",
        path: "/pages/app/dice/dice"
      }, {
        name: "身材计算",
        src: "/static/home/helath.png",
        path: "/pages/app/bmi/bmi"
      }, {
        name: "天气",
        src: "/static/home/weather.png"
      }, {
        name: "IP地址查询",
        src: "/static/home/ip.png",
        path: "/pages/app/ip/ip"
      }, {
        name: "手机归属地",
        src: "/static/home/phone.png",
        path: "/pages/app/phone/phone"
      }, {
        name: "电码查询",
        src: "/static/home/guard.png"
      }, {
        name: "历史今天",
        src: "/static/home/history.png"
      },]
    }
  },
  methods: {
    goTo(item) {
      if (item.path) {
        uni.navigateTo({
          url: item.path
        })
      }
    }
  }
}
</script>

<style scoped>
.item-box {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 2rpx solid #eee;
  gap: 10rpx;
  height: 600px;
}

image {
  width: 200px;
  height: 200px;
}

.flex-item {
  width: calc(33.3% - 30rpx);
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  margin: 10rpx;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.flex-item image {
  width: 150rpx;
  height: 150rpx;

}

.flex-item text {
  width: 100%;
  align-self: center;
  font-size: 30rpx;
  color: #333;
  line-height: 1;
  margin-top: 5px;
}

.uni-title {
  text-align: center;
  font-size: 30rpx;
  color: #333;
  margin-top: 10rpx;
}

.uni-page {
  background-color: #fff;
}

</style>
